<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
	function sosuo() {
		var lpath = location.pathname;
		$("#soform").attr("action", lpath + "?pageNo=" + 1);

		$("#soform").submit();
	}
</script>
</head>

<body>
	<div class="panel panel-info panel-content">
		<div class="panel-heading">
			<button style="float: right" type="button" onclick="addlink()" class="btn btn-info">
				<span class="glyphicon glyphicon-plus"></span>
				&nbsp;新增链接
			</button>
			<form id="soform" method="post">
				<table>
					<tr>
						<td class="w80" style="padding-top: 5px">链接名称：</label>
						</td>
						<td class="w150 ">
							<input type="text" class="form-control" name="so_name" value="${so_name!}" id="so_name" placeholder="" data-options="">
						</td>
						<td style="padding-left: 10px">
							<div class="input-group">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button" onclick="sosuo()">搜索</button>
								</span>
							</div>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<table class="table table-hover table-bordered table-striped table-condensed">
			<thead>
				<tr>
					<th width="10%">#</th>
					<th width="15%">链接名称</th>
					<th width="15%">添加nofollow</th>
					<th width="15%">是否启用</th>
					<th width="15%">点击数</th>
					<th width="10%">序号</th>
					<th width="20%">操作</th>
				</tr>
			</thead>
			[#list pagination.list as link ]
			<tr>
				<td align="center">${link_index + 1}</td>
				<td align="center">${link.name!}</td>
				<td align="center">[#if link.nofollow??][#if link.nofollow==1]是[#else]否[/#if][/#if]</td>
				<td align="center">[#if link.state??][#if link.state==1]启用[#else]未启用[/#if][/#if]</td>
				<td align="center">${link.hit!0}</td>
				<td align="center">
					<input type="text" id="sortnum${link.id!}" placeholder="" name="sortnum" required="" value="${link.seq!}" onblur="changeSort(${link.id!} , ${link.seq!-100});" style="width: 45px; text-align: center;" maxlength="4">
				</td>
				<td align="center">
					<button type="button" class="btn btn-danger btn-xs delbtn" onclick="edit('${link.id}','${link.name!}','${link.type!}','${link.url!}','${link.imgPath!}','${link.state!}','${link.nofollow!}','${link.memo!}')">编辑</button>
					<button type="button" class="btn btn-danger btn-xs delbtn" onclick="del('${link.id}')">删除</button>
				</td>
			</tr>
			[/#list]
		</table>

		<div class="panel-footer">[@fenye p = pagination form = 'infoForm' /]</div>
	</div>


	<!-- 新增的弹出页 -->
	<div id="addlink" style="width: 500px; height: 350px; display: none;">
		<form id="addform" method="post" class="form-horizontal" role="form">
			<input type="hidden" name="imgPath" id="addpath">
			<div class="form-group">
				<label class="col-sm-2 control-label" id="clickforpro">链接名称</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="name" id="addname">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">链接类型</label>
				<div class="col-sm-9">
					<select class="form-control" name="type" id="addtype">
						<option value="">请选择</option>
						<option value="1">通用友情链接</option>
						<option value="2">合作机构</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label" id="clickforpro">链接地址</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="url" id="addurl">
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-2 control-label">是否启用</label>
				<div class="col-sm-9">
					<input type="radio" id="addstatetrue"  placeholder="" min="1" required="required" name="state" value="1" checked="checked">是
					<input type="radio" id="addstatefalse" placeholder="" min="1" required="required" name="state" value="0">否
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">nofollow</label>
				<div class="col-sm-9">
					<input type="radio" id="addnofollowtrue"  placeholder="" min="1" required="required" name="nofollow" value="1" checked="checked">是
					<input type="radio" id="addnofollowfalse" placeholder="" min="1" required="required" name="nofollow" value="0">否
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">备注</label>
				<div class="col-sm-9">	
					<textarea class="form-control" placeholder="" min="1" required="required" name="memo" id="addmemo"></textarea>
				</div>	
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">链接图片</label>
				<div class="col-sm-9">	
					<button onclick="addupload()" type="button" class="btn btn-info">添加/修改图片</button>
					<input id="addsubmit" onclick="subadd()" type="button" class="btn btn-success" style="float:right" value="提交" />
					<img id="addimg" src="" style="width:100%;height:250px;display:none"/>
				</div>	
			</div>
		

		</form>
	</div>

	<!-- 编辑的弹出页 -->
	<div id="editlink" style="width: 500px; height: 350px; display: none;">
		<form id="editform" method="post" class="form-horizontal" role="form">
			<input type="hidden" name="id" id="editid">
			<input type="hidden" name="imgPath" id="editpath">
			<div class="form-group">
				<label class="col-sm-2 control-label" id="clickforpro">链接名称</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="name" id="editname">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">链接类型</label>
				<div class="col-sm-9">
					<select class="form-control" name="type" id="edittype">
						<option value="">请选择</option>
						<option value="1">通用友情链接</option>
						<option value="2">合作机构</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label" id="clickforpro">链接地址</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" placeholder="" min="1" required="required" name="url" id="editurl">
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-2 control-label">是否启用</label>
				<div class="col-sm-9">
					<input type="radio" id="editstatetrue"  placeholder="" min="1" required="required" name="state" value="1" checked="checked">是
					<input type="radio" id="editstatefalse" placeholder="" min="1" required="required" name="state" value="0">否
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">nofollow</label>
				<div class="col-sm-9">
					<input type="radio" id="editnofollowtrue"  placeholder="" min="1" required="required" name="nofollow" value="1" checked="checked">是
					<input type="radio" id="editnofollowfalse" placeholder="" min="1" required="required" name="nofollow" value="0">否
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">备注</label>
				<div class="col-sm-9">	
					<textarea class="form-control" placeholder="" min="1" required="required" name="memo" id="editmemo"></textarea>
				</div>	
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">链接图片</label>
				<div class="col-sm-9">	
					<button onclick="editupload()" type="button" class="btn btn-info">添加/修改图片</button>
					<input id="editsubmit" onclick="subedit()" type="button" class="btn btn-success" style="float:right" value="提交" />
					<img id="editimg" src="" style="width:100%; height:250px;display:none;" />
				</div>	
			</div>		
		</form>
	</div>




</body>
</html>
<script type="text/javascript">
//新增上传
	function addupload() {
		exceldialog = art.dialog.uploadFile("上传图片", {
			callback : "adduploadcallback",
			userpath : "admin",
			extensions : "gif,jpg,png,jepg"
		});
	}
	function adduploadcallback(response) {
		exceldialog.close();
		$("#addimg").attr("src", response.url);
		$("#addimg").show();
		$("#addpath").val(response.url);
	}
	
	//编辑上传
	function editupload() {
		exceldialog = art.dialog.uploadFile("上传图片", {
			callback : "edituploadcallback",
			userpath : "admin",
			extensions : "gif,jpg,png,jepg"
		});
	}
	function edituploadcallback(response) {
		exceldialog.close();
		$("#editimg").attr("src", response.url);
		$("#editimg").show();
		$("#editpath").val(response.url);
	}

	//展示新增窗口
	function addlink() {
		dialog = art.dialog({
			title : "新增链接",
			lock : true,
			content : document.getElementById('addlink')
		});
	}
	//删除
	function del(id) {//弹出警告框判断是否删除
		if (confirm('是否确认删除')) {
			$.ajax({
				url : '/friendly_link/ajax_del.do',
				type : 'get',
				dataType : 'json',
				data : {
					id : id
				},
				beforeSend : function() {
					art.dialog.tips("删除中...");
				},
				success : function(data) {
					if (data.success) {
						location.reload();
					} else {
						error_msg(data.msg, function() {
							location.reload();
						});
					}
				}
			});
		}
	}

	//打开编辑窗口
	function edit(id, name, type, url, path, state, nofollow, memo) {
		$("#editid").val(id);
		$("#editname").val(name);
		$("#edittype").val(type);
		$("#editurl").val(url);
		$("#editimg").attr("src",path);
		if(path){
			$("#editimg").show();
		}else{
			$("#editimg").hide();
		}
		$("#editpath").val(path);
		$("#editmemo").val(memo)
		if(state==1)
		{
			$("#editstatetrue").prop("checked",true)
		}
		if(state==0)
		{
			$("#editstatefalse").prop("checked",true)
		}
		if(nofollow==1)
		{
			$("#editnofollowtrue").prop("checked",true)
		}
		if(nofollow==0)
		{
			$("#editnofollowfalse").prop("checked",true)
		}
		dialog = art.dialog({
			title : "修改链接",
			lock : true,
			content : document.getElementById('editlink')
		});
	}
	//新增提交
	function subadd(){
	[#--提交之前 form 要手动进行验证--]
	
	var name = $("input[id='addname']").val();
	if (!name) {
		alert('链接名称必须填写!');
		return;
	}
	var type = $("select[id='addtype']").val();
	if (!type) {
		alert('请选择链接类型!');
		return;
	}
	var imgurl = $("input[id='addurl']").val();
	if (!imgurl) {
		alert('链接地址填写!');
		return;
	}
	
	art.dialog.post({
		url: "/friendly_link/ajax_save.do",
        data:$("#addform").serialize(),
        success: function(data){
            if(data.success){
                location.reload();
            }else{
            	alert(data.msg)
            }
        }
	},"加载中...");
	
	}
	
	//编辑提交
	function subedit(){
	[#--提交之前 form 要手动进行验证--]
	
	var name = $("input[id='editname']").val();
	if (!name) {
		alert('链接名称必须填写!');
		return;
	}
	var type = $("select[id='edittype']").val();
	if (!type) {
		alert('请选择链接类型!');
		return;
	}
	var imgurl = $("input[id='editurl']").val();
	if (!imgurl) {
		alert('链接地址填写!');
		return;
	}
	art.dialog.post({
		url: "/friendly_link/ajax_edit.do",
        data:$("#editform").serialize(),
        success: function(data){
            if(data.success){
                location.reload();
            }else{
            	alert(data.msg)
            }
        }
	},"加载中...");
	}
	
	
	function changeSort(id , oldsort){
		var sort = $("#sortnum"+id).val();
		if(sort == ''){
			$("#sortnum"+id).val(oldsort==-100?'':oldsort);
			return false;
		}
		
		if(!new RegExp("\\d+").test(sort)){
			alert("输入非法");
			$("#sortnum"+id).val(oldsort);
		}
		$.ajax({
			url : '/friendly_link/changeSort.do',
			type : 'post',
			dataType : 'json',
			beforeSend:function(){
				$("#sortnum"+id).parent().append('<img id="abc"  src="/res/common/images/loadding.gif" style="width: 20px;height: 20px;position:absolute;"  >');
	        },
	        complete:function(){
	            $("#abc").remove();
	        },
			data : {
				id : id ,
				sort : sort
			},
			success : function(data){
				if(data.res){
				}
			}
		});
	}
</script>